﻿<template>
  <div class="bottom">
    <div class="bottom-total">
      <span class="bottom-total-number">共{{orderData.totalnum}}件商品，</span>
      <span class="bottom-total-price">{{orderData.orderamount | math-money}} ({{discount}}折)</span>

    </div>
    <div class="bottom-dividing"></div>
    <div class="bottom-btns"
         v-if="showNegative||showPositive || showConfirm">
      <div class="bottom-btns-negative btns"
           v-if="showNegative"
           @click="negativeFunc">{{negativeText}}</div>
      <div class="bottom-btns-positive btns"
           v-if="showPositive"
           @click="positiveFunc">{{positiveText}}</div>
      <div class="bottom-btns-confirm btns"
           v-if="showConfirm"
           @click="confirmFunc">{{confirmText}}</div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.bottom {
  .bottom-total {
    display: flex;
    justify-content: flex-end;
    height: 79px;
    align-items: center;

    .bottom-total-number {
      font-size: 26px;
      color: rgba(51, 51, 51, 1);
    }

    .bottom-total-price {
      font-size: 28px;
      color: rgba(227, 20, 54, 1);
    }
  }

  .bottom-dividing {
    width: 100%;
    height: 1.3px;
    background: RGBA(241, 241, 241, 1);
  }

  .bottom-btns {
    font-size: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 90px;

    .btns {
      width: 152px;
      height: 60px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bottom-btns-negative {
      border: 2px solid RGBA(153, 153, 153, 1);
      background: none;
      color: RGBA(102, 102, 102, 1);
    }

    .bottom-btns-confirm {
      border: 2px solid RGBA(174, 42, 38, 1);
      background: none;
      color: RGBA(174, 42, 38, 1);
      margin-left: 20px;
    }

    .bottom-btns-positive {
      color: RGBA(255, 255, 255, 1);
      background: RGBA(174, 42, 38, 1);
      border: 2px solid RGBA(174, 42, 38, 1);
      margin-left: 30px;
    }
  }
}
</style>

<script>
import mixins from '@/mixins'
export default {
  name: 'bottom',
  data () {
    return {
      showNegative: false,
      showPositive: false,
      showConfirm: false,
      negativeText: '',
      positiveText: '',
      confirmText: '',
      negativeFunc: null,
      positiveFunc: null,
      confirmFunc: null
    }
  },
  props: {
    orderData: {
      type: Object,
      default () {
        return {}
      }
    },
    discount: {
      type: Number,
      default: 0
    }
  },
  watch: {
    orderData: {
      immediate: true,
      deep: true,
      handler (val) {
        this.noPay = true
        let self = this
        switch (val.orderstatus) {
          case '0':// 待付款
            this.showNegative = true
            this.showPositive = true
            this.negativeText = '取消订单'
            this.positiveText = '立即付款'
            this.negativeFunc = function () {
              self.updateOrderStatus('5')
            }
            this.positiveFunc = function () {
              self.$router.push({
                name: 'pay',
                query: {
                  orderitem: JSON.stringify({
                    orderamount: val.orderamount,
                    orderid: val.orderid
                  })
                }
              })
            }
            break
          case '1': // 待发货
            this.showNegative = false
            // this.negativeText = '提醒发货'
            // this.negativeFunc = function () {
            // self.updateOrderStatus('5')
            // }
            break
          case '2': // 待收货
            this.showNegative = true
            this.showConfirm = true
            this.negativeText = '查看物流'
            this.confirmText = '确认收货'
            this.negativeFunc = function () {
              // self.updateOrderStatus('5')
              this.tologistics()
            }
            this.confirmFunc = function () {
              self.updateOrderStatus('3')
            }
            break
          case '3': // 已收货
            this.showNegative = true
            this.negativeText = '查看物流'
            this.negativeFunc = function () {
              // self.updateOrderStatus('5')
              self.tologistics()
            }
            this.showPositive = true
            this.positiveText = '完成订单'
            this.positiveFunc = function () {
              // self.updateOrderStatus('5')
              self.updateOrderStatus('4')
            }
            break
          case '4': // 已完成
            break
          case '5': // 已取消
        }
      }
    }
  },
  mixins: [mixins],
  methods: {
    tologistics () {
      this.$router.push({name: 'logistics-details', query: { orderid: this.orderData.orderid }})
    },
    // 更新状态
    async updateOrderStatus (newOrderStatus) {
      try {
        let result = await this.$ajax.put('/tOrder/updateOrderStatus.json', {
          orderid: this.orderData.orderid,
          orderstatus: newOrderStatus
        })
        if (result.result - '0' > 1) {
          this.$toast('取消订单成功')
        }
        this.$emit('reRequestNet')
      } catch (e) {
        this.$toast(e)
      }
    }
  },
  mounted () {
  },
  components: {
  }
}
</script>
